<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>WebSocket</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
       /*  .container-fluid {
            margin-top: 15px;
        } */

        .textLog {
            margin-bottom: 15px;
            overflow-y: auto;
            height: 450px;
            cursor: text;
            background-color: #515a6e;
            color: #f8f8f9;
            font-size: 14px;
        }

        input {
            margin-bottom: 15px;
        }

        p button,
        p a {
            margin-right: 10px;
        }
       /*  .container-fluid .jumbotron {
            padding: 20px 20px;
        } */
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="jumbotron">
            <h2>日志</h2>
            <p>通过这里你可以实时看见后端的日志</p>
            <div class="form-control textLog">
                
            </div>
            <input  type="hidden" class="form-control" placeholder="请输入URL" value="39.104.86.50:8061/websocket">
            <p>
                <a tabindex="0" class="btn btn-primary connect" role="button" data-trigger="focus" title="建立连接失败"
                    data-content="连接失败，请您仔细检查URL是否有效">建立连接</a>
                <button type="button" class="btn btn-primary clear">清除日志</button>
                <button type="button" class="btn btn-primary break">断开连接</button>
            </p>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
    </script>
    <script src="https://cdn.bootcss.com/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script type="text/javascript">
        let ws;
        $('[data-toggle="popover"]').popover();
        $(".connect").click(function () {
            let url = $("input").val();
            ws = new WebSocket(`ws://${url}`);
            ws.onopen = function () {
                $('.connect').popover('destroy');
                swal("已连接!", "连接上了哦!", "success");
            };
            ws.onmessage = function (evt) {
                let received_msg = evt.data;
              
                let reg1 = /@xiancheng@.+@xiancheng@/g;
                received_msg = received_msg.replace(reg1, function(match, pos, originalText){
                    return `<span style="color: #ff9900">${match}</span>`;
                });
                let reg2 = /@dengji@info(\s)*@dengji@/ig;
                received_msg = received_msg.replace(reg2, function(match, pos, originalText){
                    return `<span style="color: #19be6b">${match}</span>`;
                });
                let reg3 = /@dengji@ERROR(\s)*@dengji@/ig;
                received_msg = received_msg.replace(reg3, function(match, pos, originalText){
                    return `<span style="color: #ed4014">${match}</span>`;
                });
                let reg4 = /@bao@.+@bao@/g;
                received_msg = received_msg.replace(reg4, function(match, pos, originalText){
                    return `<span style="color: #2db7f5">${match}</span>`;
                });
                let reg5=/(@xiancheng@)|(@dengji@)|(@bao@)/g;
                received_msg = received_msg.replace(reg5,"");
                $(".textLog").html($(".textLog").html() + received_msg+"<hr>");
                $('.textLog').scrollTop($('.textLog')[0].scrollHeight);
            };
            ws.onerror = function () {
                $('.connect').popover('show');
            }
        });
        $(".clear").click(function () {
            $(".textLog").html("");
        });
        $(".break").click(function () {
            if (ws) {
                ws.close();
                swal("连接断开!", "断开连接了哦!", "success");
            }
        });
    </script>
</body>

</html>
